<template>
    <a-drawer
        id="add_machine_drawer"
        width="60%"
        title="设备管理"
        placement="right"
        :visible="modal_show"
        @close="onCancle"
        :destroyOnClose="true"
        :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }"
        >
        <a-form :model="machine_value"  layout="vertical">
            <a-row :gutter="16">
                <a-col :span="4">
                    <a-form-item label="设备名称" class="my-form-item">
                        <a-input v-model:value="machine_value.name" />
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="设备别名" class="my-form-item" >
                        <a-input v-model:value="machine_value.aname"/>
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="设备编号" class="my-form-item" >
                        <a-input v-model:value="machine_value.bh"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="机柜位置" class="my-form-item">
                        <a-input v-model:value="machine_value.wz" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="6">
                    <a-form-item label="管理者" class="my-form-item">
                        <a-input v-model:value="machine_value.glz" />
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="主要使用部门"  class="my-form-item">
                        <a-input v-model:value="machine_value.syz"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="4">
                    <a-form-item label="品牌"  class="my-form-item">
                        <a-input v-model:value="machine_value.pp"/>
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="型号"  class="my-form-item">
                        <a-input v-model:value="machine_value.xh"/>
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="序列号"  class="my-form-item">
                        <a-input v-model:value="machine_value.xlh"/>
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="入库时间"  class="my-form-item">
                        <a-input v-model:value="machine_value.sj"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="操作系统类型"  class="my-form-item">
                        <a-input v-model:value="machine_value.op"/>
                    </a-form-item>
                </a-col>
            </a-row>
            
            <a-row :gutter="16">
                <a-col :span="6">
                    <a-form-item label="设备类型"  class="my-form-item">
                        <a-select 
                            v-model:value="machine_value.type"
                            style="width: 150px;"
                            :options="$store.state.machine_type"
                            size="small"
                            :field-names="{ label: 'name', value: 'val' }"
                            />
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="设备状态"  class="my-form-item">
                        <a-select 
                            v-model:value="machine_value.status"
                            style="width: 150px;"
                            :options="$store.state.machine_status"
                            size="small"
                            :field-names="{ label: 'name', value: 'val' }"
                            />
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="存储容量(GB)"  class="my-form-item">
                        <a-input v-model:value="machine_value.cc"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="存储使用量(GB)"  class="my-form-item">
                        <a-input v-model:value="machine_value.ccsy"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="设备用途" class="my-form-item">
                        <a-textarea v-model:value="machine_value.yt" :rows="2" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="其他说明" class="my-form-item">
                        <a-textarea v-model:value="machine_value.sm" :rows="4" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <template #extra>
            <a-space>
                <a-button @click="onCancle">取消</a-button>
                <a-button type="primary" @click="onConfirm">确认</a-button>
            </a-space>
        </template>
    </a-drawer>
</template>
<script>
import { notification } from 'ant-design-vue';
export default {
    data() {
        return {
            modal_show: false,
            machine_value: {},

        };
    },
    beforeUnmount() {
        this.$mitt.off('add_machine_drawer');
    },
    mounted() {
        this.$mitt.on('add_machine_drawer', _value => {
            this.machine_value=Object.assign({},_value)
            this.modal_show=true;
        });
    },
    methods: {
        onCancle(){
            this.modal_show=false
        },
        onConfirm(){
            if(!this.machine_value.aname){
                this.$message.info("至少需要输入设备的别名")
                return
            }
            this.$mitt.emit('add_machine_drawer_result', this.machine_value);
            this.modal_show=false
        },
    },
};
</script>